<template>
  <div>
    <div class="tabview newsPageDiv">
      <img src="@/assets/banner_waterdrop.png" />
       <Breadcrumb />
       <div>
         <span class="news-text">项目基本信息</span>       
         <a-divider style="margin-top:10px;margin-bottom:10px;" />    
       </div>
       <div class="search-div">
          <a-input v-model="queryinput" placeholder="请输入项目名称" style="font-size:12px;"/>
          <a-button type="primary" class="report-search-btn">查询</a-button>
       </div>
       <div style="margin-top:10px;">
          <CustomTable
            ref="table"
            :showAlert="false"
            :showSelection="false"
            :columns="columns"
            :loading="load"
            @change="onTableChange"
            :dataSource="pageData"
            :scroll="{ y: 240 }"
          >
            
          </CustomTable>
        </div>
      </div>
     <!-- <footerPage :page="4" ></footerPage> -->
  </div>
</template>

<script>
// import footerPage from '../footer/footerPage'
import Breadcrumb from "@/components/base/tools/Breadcrumb";
export default {
  name: "projBaseInfoPage",
  components: {
    //  footerPage,
    Breadcrumb
  },
  data() {
    return {
      collapsed: true,
      menukey:1,
      load: false,
      columns: [
        {
              title: '序号',
              dataIndex: 'xh',
              key: 'xh',
              width:70,
            },
            {
              title: '项目名称',
              dataIndex: 'projectName',
              key: 'projectName',
              // ellipsis: true,
              width: 500,
            },
            {
              title: '项目所在地',
              dataIndex: 'projectAddress',
              key: 'projectAddress',
              // ellipsis: true,
              // width: 300,
            },
            
      ],
      pageData: [
            {
              key: '1',
              xh: '1',
              projectName: '海口市桂林洋防潮堤加固工程（山湖港水闸～桂林洋浴场北段）',
              projectAddress: '海南省海口市桂林洋经济开发区海南省海口市桂林洋经济开发区',
            },
            {
              key: '2',
              xh: '2',
              projectName: '海口市桂林洋防潮堤加固工程（山湖港水闸～桂林洋浴场北段）',
              projectAddress: '海南省海口市桂林洋经济开发区',
            },
            {
              key: '3',
              xh: '3',
              projectName: '海口市桂林洋防潮堤加固工程（山湖港水闸～桂林洋浴场北段）',
              projectAddress: '海南省海口市桂林洋经济开发区',
            },
            {
              key: '4',
              xh: '4',
              projectName: '海口市桂林洋防潮堤加固工程（山湖港水闸～桂林洋浴场北段）',
              projectAddress: '海南省海口市桂林洋经济开发区',
            },
            {
              key: '5',
              xh: '5',
              projectName: '海口市桂林洋防潮堤加固工程（山湖港水闸～桂林洋浴场北段）',
              projectAddress: '海南省海口市桂林洋经济开发区',
            },
            {
              key: '6',
              xh: '6',
              projectName: '海口市桂林洋防潮堤加固工程（山湖港水闸～桂林洋浴场北段）',
              projectAddress: '海南省海口市桂林洋经济开发区',
            },
            {
              key: '7',
              xh: '7',
              projectName: '海口市美兰区中小河流治理重点县综合整治与水系连通试点演州河三江镇项目区一',
              projectAddress: '海南省文昌市地址地址地址地址地址',
            },
            {
              key: '8',
              xh: '8',
              projectName: '海口市桂林洋防潮堤加固工程（山湖港水闸～桂林洋浴场北段）',
              projectAddress: '海南省海口市桂林洋经济开发区',
            },
            {
              key: '9',
              xh: '9',
              projectName: '海口市桂林洋防潮堤加固工程（山湖港水闸～桂林洋浴场北段）',
              projectAddress: '海南省海口市桂林洋经济开发区',
            },
            {
              key: '10',
              xh: '10',
              projectName: '海口市美兰区中小河流治理重点县综合整治与水系连通试点演州河三江镇项目区一',
              projectAddress: '海南省海口市桂林洋经济开发区',
            },
            {
              key: '11',
              xh: '11',
              projectName: '海口市美兰区中小河流治理重点县综合整治与水系连通试点演州河三江镇项目区一',
              projectAddress: '海南省海口市桂林洋经济开发区',
            }
         ],
      pageFilter: {
        currentPage: 1,
        pageSize: 10
      },
    };
  },
  methods:{
   onLeftMenuClick({ key }) {
     this.menukey=key;
   },
    onTableChange(pageFilter) {
      // this.pageFilter = { ...this.pageFilter, ...pageFilter };
      // console.log(this.pageFilter);
      // this.refreshTable();
    },
    refreshTable() {
      // this.load = true;
      // help.getDocList(this.pageFilter).then(res => {
      //   console.log(res);
      //   let { pages, current, records, size, total } = res;
      //   let currentPage = current;
      //   let pageSize = size;

      //   this.pageData = { ...this.form, currentPage, records, pageSize, total };
      //   console.log(this.pageData);
      //   this.load = false;
      // });
    },
  }
};
</script>
<style lang="less">

.newsPageDiv > img {
  width: 100%;
  max-width: 100%;
  margin-top: -2.5px;
  height: 120px;
}
.news-text{
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #337BD7;
}
.search-div{
  width:320px;
  display:flex;
  .report-search-btn{
    // width: 80px;
    height: 30px;
    background: #337BD7;
    border: 0;
    border-radius: 4px;
    margin-left: 10px;
    margin-top: 1px;
  }
  .ant-btn-primary:hover, .ant-btn-primary:focus {
    color: #fff;
    background-color: #337BD7;
    border-color: #337BD7;
  }
}



</style>